<template>
	<view class="content">
		<view class="new-head">
			<AllHeads :type="type" @back="back"></AllHeads>
		</view>

		<view class="all-title">
			<text class="title-p">绑定邀请码</text>
			<text class="title-span">绑定推荐人邀请码</text>
		</view>

		<view class="code-code">
			<input type="text" class="code-input" placeholder="请输入邀请码" />
			<text class="code-btn" @click="sure">确认邀请码</text>
		</view>

		<view class="code-method">
			<text class="method-title">如何输入邀请码?</text>
			<view class="method-all" v-for="item, index in picList" :key="index">
				<text class="all-head">{{ item.title }} <text class="span">{{ item.word }}</text> </text>
				<view class="all-boxes" v-for="it, i in item.children">
					<image class="boxes-image" :src="it.img" mode=""></image>
				</view>
			</view>
		</view>

		<view class="code-overlay" v-if="show" @click="over">
			<view class="overlay-box">
				<text class="box-message">验证码填写错误, 请重新填写</text>
				<text class="box-botton" @click="close">确定</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: 'arrow-left',
				picList: [{
						title: '方法一: ',
						word: '手动输入好友分享链接里的邀请码',
						children: [{
							img: '../../static/images/wx1.png'
						}]
					},
					{
						title: '方法二: ',
						word: '复制分享链接, 然后打开美传APP',
						children: [{
								img: '../../static/images/wx2.png'
							},
							{
								img: '../../static/images/wx3.png'
							},
							{
								img: '../../static/images/wx4.png',
							},
						]
					}
				],
				show: false
			};
		},
		methods: {
			sure() {
				this.show = true
			},
			close() {
				this.show = false
			},
			over() {
				this.show = false
			}
		}
	}
</script>

<style lang="scss">
	text {
		display: block;
	}

	.content {
		padding: 25rpx 25rpx 40rpx 25rpx;
		width: 100%;
		height: 100%;
		background: #fff;
		margin-bottom: 0;
		padding-top: 25rpx;

		.new-head {
			width: 100%;
			padding: 50rpx 0 70rpx 0;
		}

		.all-title {
			width: 100%;
			text-align: center;
			font-size: 50rpx;
			font-weight: 600;

			.title-span {
				font-size: 27rpx;
				color: #9193a4;
				font-weight: 500;
				margin-top: 20rpx;
			}
		}

		.code-code {
			padding: 30rpx;
			margin: 40rpx 0;

			.code-input {
				// width: 100%;
				// height: 40rpx;
				background-color: #f6f7f9;
				padding: 25rpx 30rpx;
				border-radius: 15rpx;
			}

			.code-btn {
				width: 100%;
				// height: 40px;
				// line-height: 40rpx;
				background: linear-gradient(to right, #ff2928, #fd6f2b);
				color: #fff;
				font-size: 35rpx;
				text-align: center;
				padding: 25rpx 0;
				border-radius: 15rpx;
				margin-top: 40rpx;
			}
		}

		.code-method {
			.method-title {
				width: 100%;
				text-align: center;
				font-size: 35rpx;
				font-weight: 550;
			}

			.method-all {
				margin-top: 40rpx;

				text {
					display: inline;
				}

				.all-head {
					color: #f33d24;
					font-weight: 550;

					.span {
						color: #000;
					}
				}

				.all-boxes {
					padding: 30rpx;

					.boxes-image {
						border-radius: 20rpx;
						width: 100%;
						height: 800rpx;
						padding: 0;
					}
				}
			}
		}

		.code-overlay {
			width: 100%;
			height: 100vh;
			position: fixed;
			top: 0;
			left: 0;
			background-color: rgba(0, 0, 0, 0.5);
			z-index: 9999;
			display: flex;
			align-items: center;

			.overlay-box {
				margin: 0 auto;
				background-color: #fff;
				width: 580rpx;
				height: 380rpx;
				border-radius: 30rpx;
				padding: 50rpx 30rpx 30rpx 30rpx;

				.box-message {
					text-align: center;
					font-size: 33rpx;
					font-weight: 550;
					margin-top: 50rpx;
				}

				.box-botton {
					width: 100%;
					text-align: center;
					background: linear-gradient(to right, #ff2926, #fe702c);
					padding: 20rpx 0;
					color: #fff;
					border-radius: 15rpx;
					font-size: 35rpx;
					margin-top: 120rpx;
				}
			}
		}
	}
</style>